<template>
  <div id="showing" >
    <div class="showHeard" v-show="nullObj.shows !=undefined">
      <div class="showAddr">{{showData.cinemaName}}</div>
      <div class="showBigaddr">{{cinemaData.addr}}</div>
      <div class="showIcon" >
        <img src="../../../../image/aaaaa11.png">
      </div>
    </div>
    <div class="movie_box" v-show="nullObj.shows !=undefined">  
      <swiper
        ref="mySwiper"
        :options="swiperOption"
        style="padding:14px 14px 0px 14px;height:120px;"		
      >	

        <!-- slides -->
        <swiper-slide
          v-for="(movies,index) in showData.movies"
          :key="movies.id"
          class="sw"
          style="width: 65px;height: 95px;padding-top:4px;"
        >	
          <!--changeIndex不用写this-->
		    <div
        class="bgShow_z"
        :style="{backgroundImage:'url('+picFix(showData.movies[changeIndex].img)+')'}"  
		v-show="changeIndex==index?true:false"
      ></div>

          <div :class="{addScale:changeIndex==index?true:false}  ">
            <img @click="slideTo(index)" :src="picFix(movies.img)" alt>
          </div>
        </swiper-slide>
	
      </swiper>
    </div>
    <!--电影name-->
    <div class="showTitle" v-show="nullObj.shows !=undefined">
      <div>
        <span>{{nullObj.nm}}</span>
        <span v-if="nullObj.sc!=0">{{nullObj.sc}}分</span>
        <span v-else>暂无评分</span>
      </div>
      <div>{{nullObj.desc}}</div>
    </div>

    <!--场次-->
    <div class="showMount">
      <!--日期-->
      <div v-for="(date,index) in nullObj.shows" class="showDate" @click="showDate(index)">
        <div :class="{addRed:nowDay==index?true:false}">{{date.dateShow}}</div>
      </div>
      <!--折扣卡-->
      <div v-if="showData.vipInfo !=undefined" class="vipInfo">
        <span>折扣</span>
        {{showData.vipInfo[0].title}}
        <span>{{showData.vipInfo[0].process}}</span>
      </div>
      <div v-else></div>
    </div>

    <!--具体时间-->
    <!--超级坑！！！-->
    <div v-if="nullObj.shows !=undefined">
      <div v-for="times in nullObj.shows[nowDay].plist" class="showTimesbox">
        <div class="showTimes">
          <div>{{times.tm}}</div>
          <div>{{nullObj.dur}}分钟后离场</div>
        </div>

        <div class="showLang">
          <div>{{times.lang}}{{times.tp}}</div>
          <div>{{times.th}}</div>
        </div>

        <div class="showPrice">
          <div class="showVipPriceName">
            <span style="font-size: 11px;">¥</span>
            <span v-if="times.vipPrice==undefined">30</span>
            <span
              style="font-family:'stonefont';"
              v-else
            >{{(Number(times.vipPrice)+4.0).toFixed(1)}}</span>
            <div>
              <span>{{times.vipPriceName}}</span>
              <span>¥</span>
              <span>{{times.vipPrice}}</span>
            </div>
          </div>
          <div class="showExtraDesc">{{times.extraDesc}}</div>
        </div>
        <div style="position: relative;width: 45px;">
          <button class="showButton">购票</button>
        </div>
      </div>
    </div>
    <div v-else></div>
    <div class="more" v-show="nullObj.shows ==undefined" >
                <mt-spinner type="snake"
                 color="red"></mt-spinner> 努力加载中...
     </div>
  </div>   
</template>

<script>
export default {
  created() {
    this.cinemaId = this.$route.params.cinemaId;
    this.movieId = this.$route.query.movieId;

    //应用场景：结合$refs属性内的对象使用，或者获取页面内容渲染后的尺寸
    this.$nextTick(function() {
      //DOM渲染完成后触发
      console.log("nextTick refs", this.$refs.mySwiper); //undefined
    });

    this.axios
      .get("/maoyan/ajax/cinemaDetail", {
        params: {
          cinemaId: this.cinemaId,
		  movieId: this.movieId,
        }
      })
      .then(res => {
        //保存变换的下标
        this.changeIndex = res.data.movieIndex;

        console.log("最里边", res.data);
        this.showData = res.data.showData;
        this.cinemaData = res.data.cinemaData;
        //提交修改
        this.$store.state.headerTitle = this.showData.cinemaName;

        //点击进去后定位哪个电影为中间  ,改变index的方法
        this.swiper.slideTo(res.data.movieIndex, 1000, false);

        //保存改变的日期下标
        var nowDay = this.nowDay;
        console.log('$refs',this.$refs);

        //请求完成后增加监听事件
        this.$refs.mySwiper.$on("reachEnd", () => {
		  console.log("reachEnd");
        });

        //过渡结束时触发
        this.$refs.mySwiper.$on("transitionEnd", () => {
          this.changeIndex = this.swiper.activeIndex;
          console.log("现在坐标", this.changeIndex);
          this.nullObj = this.showData.movies[this.changeIndex];
          console.log(this.nullObj);
          this.nowDay = 0;
        });
      });
  },
  computed: {
    swiper() {
      //   获取swiper实例里的数据，包含改变index的方法
      return this.$refs.mySwiper.swiper;
    }
  },
  data() {
    return {
      changeIndex: "",
      nowDay: 0,
      nullObj: {},
      movieId: "",
      showData: {},
      cinemaId: "",
      cinemaData: "",
      swiperOption: {
        slidesPerView: "auto", // 两侧的张数设为auto
        spaceBetween: 20, // swiper-slide之间的空隙（margin值）
        centeredSlides: true // 是否居中
      }
    };
  },
  methods: {
    picFix(url) {
      if (typeof url == "string") {
        return url.replace("w.h", "148.208");
      }
    },
    slideTo(goIndex) {
      this.swiper.slideTo(goIndex, 300, false);
      console.log("现在的下标", goIndex);
    },
    showDate(changeDay) {
      this.nowDay = changeDay;
    }
  }
};
</script>

<style>
</style>